import React from 'react';
import ReactDom from 'react-dom';
import './toolTable.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';
import playerStore from 'js/store/playerStore';
// import { observer, inject } from 'mobx-react';


class ToolTable extends React.Component {
    constructor() {
        super()
        this.state = {
            selectId: null
        }
    }
    componentDidMount() {
    }
    toolMake = (itemId) => {
        api('toolMake', { itemId: parseInt(itemId) }, (data) => {
            this.props.close();
            if (this.props.complete) {
                this.props.complete();
            }
        })
    }
    select = (itemId) => {
        this.setState({ selectId: itemId })
    }
    render() {
        let { selectId } = this.state;
        let self = this;
        let totalConfig = window.totalConfig, propName = window.propName;
        let baseConfig = totalConfig.base;
        let toolTableConfig = totalConfig.toolTable[260000];
        let node = [], selectNode;
        
        for (let itemId in toolTableConfig.tools) {
            let items = toolTableConfig.tools[itemId].items;
            let needItem = [];
            for (let itemId in items) {
                needItem.push(<div key={itemId} className="flex-col-6">{propName[itemId]}x{items[itemId]}</div>)
            }
            node.push(<div className={"toolTableItem flex-vcenter " + (selectId == itemId ? 'active' : '')} key={itemId}
                onClick={self.select.bind(self, itemId)}>
                <div className="name">{propName[itemId]}</div>
                <div className="needItem flex wrap">{needItem}</div>
            </div>)
        }
        if (selectId) {
            let items = toolTableConfig.tools[selectId].items;
            let needItem = [];
            for (let itemId in items) {
                needItem.push(<div key={itemId} className="flex-col-6">{propName[itemId]}x{items[itemId]}</div>)
            }
            selectNode = <div className="">
                <div className="name">{propName[selectId]}</div>
                <div className="needItem flex wrap">{needItem}</div>
                <Button onClick={() => { this.toolMake(selectId) }}>制作</Button>
            </div>
        }
        return <div id="toolTable" className="flex-col">
            <div className="flex-g-1 scroll-absolute">
                <div>
                    {node}
                </div>
            </div>
            <div className="toolTable-bottom">
                {selectNode}
            </div>
        </div>
    }
}

export default ToolTable;